<template>
  <div class="layout-container flex">
    <!-- 选择具体的业务组件 -->
    <div class="left flex wrap space-between">
      <slot />
    </div>
    <!-- 显示对应的业务组件 -->
    <div class="center">
      <Router-view v-slot="{ Component }">
        <component
          :is="Component"
          :status="store.coms[store.currentMaterialCom].status"
          :serialNum="1"
        />
      </Router-view>
    </div>
    <!-- 编辑面板 -->
    <div class="right">
      <EditPanel :com="currentCom" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, provide } from 'vue'
import { useMaterialStore } from '@/stores/useMaterial'
import EditPanel from '@/components/SurveyComs/EditItems/EditPanel.vue'
import { ElMessage } from 'element-plus'
import type { PicLink } from '@/types'
import { isStringArray, isPicLink, isPicTitleDescStatusArr, isTypeStatus } from '@/types'
import { changeEditorIsShowStatus } from '@/utils'
// 数据仓库
const store = useMaterialStore() as unknown as MaterialStore
// 获取当前选中组件的状态数据
const currentCom = computed(() => store.coms[store.currentMaterialCom])
const updateStatus = (configKey: string, payload?: number | string | boolean | object) => {
  // 拿到新的状态数据后，应当去修改仓库中的数据
  switch (configKey) {
    case 'type': {
      if (typeof payload === 'number' && isTypeStatus(currentCom.value.status)) {
        // 切换其它编辑器的显示状态
        changeEditorIsShowStatus(currentCom.value.status, payload)
        store.setCurrentStatus(currentCom.value.status[configKey], payload)
      }
      break
    }
    case 'title':
    case 'desc': {
      if (typeof payload !== 'string') {
        console.error('payload must be string')
        return
      }
      store.setTextStatus(currentCom.value.status[configKey], payload)
      break
    }
    case 'options': {
      if (typeof payload === 'number') {
        // 说明是删除选项
        if (
          isStringArray(currentCom.value.status[configKey].status) |
          isPicTitleDescStatusArr(currentCom.value.status[configKey].status)
        ) {
          const result = store.removeOption(currentCom.value.status[configKey], payload)
          if (result) ElMessage.success('删除成功')
          else ElMessage.error('至少保留两个选项')
        }
        // else if (isPicTitleDescStatusArr(currentCom.value.status[configKey].status)) {
        //   store.removePicLinkByIndex(currentCom.value.status[configKey], payload)
        // }
      } else if (typeof payload === 'object' && isPicLink(payload)) {
        // 说明是在设置图片的链接
        store.setPicLinkByIndex(currentCom.value.status[configKey], payload)
        // console.log(currentCom.value.status[configKey].status[payload.index].value)
      } else {
        // 说明是新增选项
        store.addOption(currentCom.value.status[configKey])
      }
      break
    }
    case 'position': {
      if (typeof payload !== 'number') {
        console.error('position payload must be number')
        return
      }
      store.setPosition(currentCom.value.status[configKey], payload)
      break
    }
    case 'titleSize':
    case 'descSize': {
      if (typeof payload !== 'number') {
        console.error('size payload must be number')
        return
      }
      store.setCurrentStatus(currentCom.value.status[configKey], payload)
      break
    }
    case 'titleWeight':
    case 'descWeight': {
      if (typeof payload !== 'number') {
        console.error('weight payload must be number')
        return
      }
      store.setWeight(currentCom.value.status[configKey], payload)
      break
    }
    case 'titleItalic':
    case 'descItalic': {
      if (typeof payload !== 'number') {
        console.error('italic payload must be number')
        return
      }
      store.setItalic(currentCom.value.status[configKey], payload)
      break
    }
    case 'titleColor':
    case 'descColor': {
      if (typeof payload !== 'string') {
        console.error('color payload must be string')
        return
      }
      store.setTextStatus(currentCom.value.status[configKey], payload)
      break
    }
  }
}
const getLink = (link: PicLink) => {
  updateStatus('options', link)
}
provide('updateStatus', updateStatus)
provide('getLink', getLink)
</script>

<style lang="scss" scoped>
.layout-container {
  width: 100%;
  // Header组件高度50px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 20px);
  align-items: flex-start;
  border: 1px solid var(--border-color);
  border-top-right-radius: var(--border-radius-large);
  border-bottom-right-radius: var(--border-radius-large);
  border-bottom-left-radius: var(--border-radius-large);
}
.left {
  width: 180px;
  text-align: center;
  align-items: flex-start;
  padding: 20px;
}
.center {
  width: 550px;
  // 多减去的60px是上下的padding，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 60px - 20px);
  overflow-y: scroll;
  padding: 30px;
  border-left: 1px solid var(--border-color);
}
.right {
  width: 350px;
  height: calc(100vh - 100px - 40px - 20px);
  overflow-y: scroll;
  border-left: 1px solid var(--border-color);
}
</style>
